<template>
  <div>
    <div class="meaudetail-header">
      <van-icon name="home-o" size='24' class="left" @click="$router.push('/index')"/>
      <h3 v-if="title">{{title}}</h3>
      <van-icon name="apps-o" size='24' class="right" @click="$router.back()"/>
    </div>
    <div class="maeudetail-swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide item" v-for="(item, index) in itemlist" :key="item.id" :class="current === index?'active':''" @click='swipeClick(item, index)'>
            <span>{{item.text}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="maeudetail-tabcard">
      <div class="sortway" v-for="(item,index) in sortlist" :key="item.way" :class="index===target?'issort':''" @click="sortClick(item, index)">
        {{item.title}}
      </div>
    </div>
    <div class="maeudetail-list" v-if="showlist">
      <meaudetailitem v-for="item in showlist" :key="item.productId" :item='item'></meaudetailitem>
      <p></p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Icon, Tab, Tabs } from 'vant'
import Swiper from 'swiper'
import meaudetailitem from './MeauDetailitem'
import { mapState, mapMutations } from 'vuex'
import 'swiper/css/swiper.css'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
export default {
  data () {
    return {
      swipe: {},
      itemlist: [],
      sortlist: [
        {
          way: 'onShelfTime',
          title: '上新'
        },
        {
          way: 'sales',
          title: '销量'
        },
        {
          way: 'price',
          title: '价格'
        }
      ],
      showlist: [],
      current: 0,
      active: 0,
      target: 0,
      id: 0,
      flag: true,
      title: ''
    }
  },
  beforeMount () {
    this.id = this.$route.params.id
    this.flag = this.meauitem1.some(item => {
      return Number(item.id) === Number(this.id)
    })
    this.itemlist = this.flag ? this.meauitem1 : this.meauitem2
    this.itemlist.unshift({
      id: 35,
      text: 'All'
    })
  },
  mounted () {
    this.swipe = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 15,
      freeMode: true
    })
    axios.get(`/pages/category/${this.id}?currentPage=1&sort=onShelfTime&order=desc&_=1583305327750`
    ).then(res => {
      this.showlist = res.data.data
    })
    this.itemlist.forEach(item => {
      if (Number(this.id) === Number(item.id)) {
        this.title = item.text
      }
    })
    this.$store.commit('setDataList',this.showlist)
    this.settabbar(false)
  },
  methods: {
    ...mapMutations('meaulist', ['setItem1', 'setItem2']),
    ...mapMutations('tabbar', ['settabbar']),
    swipeClick (item, index) {
      this.current = index
      this.id = item.id
      axios.get(`/pages/category/${this.id}?currentPage=1&sort=onShelfTime&order=desc&_=1583305327750`
      ).then(res => {
        this.showlist = res.data.data
      })
      this.title = item.text === 'All' ? this.title : item.text
    },
    sortClick (item, index) {
      this.target = index
      axios.get(`/pages/category/${this.id}?currentPage=1&sort=${item.way}&order=desc&_=1583305327750`
      ).then(res => {
        this.showlist = res.data.data
        console.log(res.data.data)
      })
    }
  },
  components: {
    meaudetailitem
  },
  computed: {
    ...mapState('meaulist', ['meauitem1', 'meauitem2'])
  },
  destroyed () {
    this.flag ? this.setItem1() : this.setItem2()
    this.settabbar(true)
  }
}
</script>

<style lang="scss">
  .meaudetail-header{
    height: 44px;
    background: #ffffff;
    line-height: 44px;
    box-sizing: border-box;
    position: relative;
    padding: 0 10px;
    border-bottom: 1px solid #f5f5f5;
    h3{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 17px;
    }
    .left{
      position: absolute;
      left: 10px;
      top: 12px
    }
    .right{
      position: absolute;
      right: 10px;
      top: 12px
    }
  }
  .maeudetail-swiper{
    background: url(https://img.wowdsgn.com/category/background/10.jpg?imageslim) no-repeat left center;
    background-size: 375px;
    position: relative;
    height:80px;
    padding: 15px 0 15px 15px;
    .item{
      width: 78px;
      height: 78px;
      line-height: 78px;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      padding: 0 15px;
      font-weight: 700;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .active{
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 1);
    }
  }
  .maeudetail-tabcard{
    height: 40px;
    line-height: 40px;
    background: #fff;
    .sortway{
      float: left;
      color: #808080;
      margin: 0rem 37.5px;
      position: relative;
      font-size: 15px;
      width: 50px;
      height: 40px;
      text-align: center;
    }
    .issort{
      border-bottom: 3px solid #202020;
      color: #000;
      height: 40px;
    }
  }
  .maeudetail-list{
    margin-top: 5px;
    p{
      clear: both;
    }
  }
</style>
